<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>教育经历</title>
    <link href="/css/header_and_nav.css" rel="stylesheet">
    <link href="/css/education_detail.css" rel="stylesheet">
    <link href="/css/list.css" rel="stylesheet">
</head>
<body>
    <header th:include="header :: copy"></header>
    <nav th:include="nav :: my_nav" class="my_nav"></nav>
    <div class="container">
        <div class="three_buttons">
            <span><a href="/educationList.do" class="back-link">返回</a></span>
            <span class="skill_button">
                <button class="my_list_button" id="updateEducation">修改</button>
                <form action="/educationDelete.do" method="post">
                    <input type="hidden" name="id" th:value="${education.id}">
                    <button type="submit" class="my_delete_button">删除</button>
                </form>
            </span>
        </div>
        <div class="education_detail_info">
            <h2> <span th:text="${education.school}"></span> </h2>
            <h3> <span th:text="${education.degree}"></span> </h3>
            <div class="education_detail_time">
                <span th:text="${education.startTime}"></span>
                <span>至</span>
                <span th:text="${education.endTime}"></span>
            </div>
            <p th:text="${education.major}" id="content"></p>
        </div>
    </div>

    <div class="modal" id="updateEducationModal">
        <div class="modal_content">
            <span class="close">&times;</span>
            <form action="/educationUpdate.do" method="post">
                <input type="hidden" name="id" th:value="${education.id}">
                <label>学校名称：</label>
                <input type="text" name="school" th:value="${education.school}">
                <label>学位：</label>
                <input type="text" name="degree" th:value="${education.degree}">
                <label>教育时间：</label>
                <input type="text" name="startTime" th:value="${education.startTime}">
                <label>至</label>
                <input type="text" name="endTime" th:value="${education.endTime}">
                <label>专业：</label>
                <textarea name="major" rows="4" cols="50" th:text="${education.major}"></textarea>
                <button class="my_list_button" type="submit">修改</button>
            </form>
        </div>
    </div>

    <script>
        var updateEducationModal = document.getElementById('updateEducationModal');
        var updateEducation = document.getElementById('updateEducation');
        var close = document.getElementsByClassName('close')[0];
        updateEducation.onclick = function () {
            updateEducationModal.style.display = 'block';
        }

        close.onclick = function () {
            updateEducationModal.style.display = 'none';
        }

        window.onclick = function (event) {
            if (event.target === updateEducationModal) {
                updateEducationModal.style.display = 'none';
            }
        }
    </script>
</body>
</html>
